<!DOCTYPE html>
<html lang="zh-cmn-Hans" class="ua-windows ua-webkit">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>丢哪了 - 景区失物招领免费快速发布平台！</title>
    <meta name="Keywords"
        content="丢哪了,失物招领,寻物启事,招领启事,丢哪了,失物招领,寻物启事,招领启事,失物招领启事,失物招领网,失物招领范文,失物招领处,丢东西,捡东西,招领,丢三落四,xunwuqishi,shiwuzhaoling,zhaoling,xunwu">
    <meta name="Description"
        content="失物招领网：丢哪了-失物招领平台，致力于提供方便、快捷的寻物启事发布、失物招领服务，打造国内最大最全的失物招领网站。一个公益、免费快速的寻物启事与失物招领发布平台！">

    <link rel="stylesheet" href="./index_files/style.css">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./plugins/elementui/index.css">
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./plugins/elementui/index.js"></script>
    <script src="./js/axios-0.18.0.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }

        .datatable td,
        .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>

<body ryt12257="1">

    <div id="db-global-nav" class="global-nav">
        <div class="bd">
            <div class="top-nav-info">
                <a href="#">关于我们</a>
                <a href="#">删除信息</a>
            </div>
            <div class="top-nav-doubanapp">
                <a href="./xunwu.html" class="lnk-doubanapp">快速发布</a>
                <div id="top-nav-appintro" class="more-items">
                    <p class="appintro-title">丢哪了</p>
                    <p class="slogan">失物招领公益平台！</p>
                    <p class="qrcode">
                        扫码关注丢哪了微信
                    </p>
                </div>
                <div id="doubanapp-tip" style="display: none;">
                    <a href="#" class="tip-link">丢哪了会员中心开放！</a>
                    <a href="javascript: void 0;" class="tip-close"></a>
                </div>
            </div>

            <div class="global-nav-items">
            </div>
        </div>
    </div>
    <div id="app">
        <div id="db-nav-commodity" class="nav">
            <div class="nav-wrap">
                <div class="nav-primary">

                    <div class="nav-items">
                        <ul>
                            <li class="nav-item nav-doulists-item ">
                                <a class="nav-link" href="./index.html">首页</a>
                            </li>
                            <li class="nav-item nav-doulists-item ">
                                <a class="nav-link" href="./xunwu.html">寻物</a>
                            </li>
                            <li class="nav-item nav-haitao-item ">
                                <a class="nav-link" href="./zhaoling.html">招领</a>
                            </li>

                        </ul>
                    </div>

                    <div class="nav-misc">
                        <div class="filter-container">
                            <el-button type="primary" class="butT" @click="handleCreate()">发布+</el-button>
                        </div>
                        <!-- 新增标签弹层 -->
                        <div class="add-form">
                            <el-dialog title="发布" :visible.sync="dialogFormVisible">
                                <template>
                                    <el-tabs v-model="activeName" type="card">
                                        <el-tab-pane label="物品信息" name="first">
                                            <el-form label-position="right" label-width="100px">
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="发布类别">
                                                            <el-input v-model="formData.category" placeholder="请填写寻物启事或失物招领"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="物品类别">
                                                            <el-input v-model="formData.name" />
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="物品标题">
                                                            <el-input v-model="formData.title" />
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="丢/拾时间">
                                                            <el-date-picker v-model="formData.localDate" type="date" placeholder="选择日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-col>                                                    
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item label="上传图片">
                                                            <el-upload class="avatar-uploader" action="/upload"
                                                                :auto-upload="autoUpload" name="image"
                                                                :show-file-list="false"
                                                                :on-success="handleAvatarSuccess"
                                                                :before-upload="beforeAvatarUpload">
                                                                <img :src="formData.image"
                                                                    class="avatar">
                                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                            </el-upload>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="20">
                                                        <el-form-item label="物品介绍">
                                                            <el-input v-model="formData.article"
                                                                type="textarea"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                    
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="悬赏金额">
                                                            <el-input v-model="formData.reward" placeholder="失主可填" />
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="丢/拾地点">
                                                            <el-input v-model="formData.localPlace" />
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="联系人">
                                                            <el-input v-model="formData.contacts" />
                                                        </el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="联系人电话">
                                                            <el-input v-model="formData.phoneNumber" />
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>                                                
                                                

                                            </el-form>
                                        </el-tab-pane>
                                    </el-tabs>
                                </template>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取消</el-button>
                                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                                </div>
                            </el-dialog>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div id="dale_dongxi_top_banner" class="base-ad-slot"></div>
        <div id="wrapper">


            <link rel="stylesheet" href="./index_files/index.css" media="screen">


            <div>
                <div class="query">
                    <span></span>
                    <input type="text" v-model="pagination.name" placeholder="物品名称" style="height: 25px;">
                    开始日期
                    <input type="date" v-model="pagination.begin">
                    结束日期
                    <input type="date" v-model="pagination.end">

                    <el-button @click="findPage()" class="dalfBut">查询</el-button>
                    <br><br>
                </div>

                <div class="page-cate-title">
                    
                    <span class="title-text">寻物启事信息列表</span>
                </div>

                <div id="wrapper">
                    <div id="content">
                        <div class="grid-16-8 clearfix">
                            <div class="article">
                                <!-- 首页开始 -->


                                <div id="container" style="height: 100%;">


                                    <!-- 推荐信息 -->

                                    <!-- 最新信息 $today_date  地区加链接 <a href="cat--area-.html" target="_blank"></a> -->

                                    <div class="grid" style="width: 194px;" v-for="data in dataList">
                                        <a :href="preUrl+data.id+'!'+data.stamp" target="_blank">
                                            <div class="imgholder"><img class="lazy" v-if="data.image != null"
                                                    :src="data.image"
                                                    data-original="data/infoimage/230428/230428082415mwoqom_thumb.jpg"
                                                    width="200" style="display: block;"></div>
                                            <strong>{{data.title}}</strong>
                                            <p><b>{{data.category}}</b></p>
                                            <p>{{data.article}}</p>
                                        </a>
                                        <div class="meta">
                                            <font color="red">{{data.releaseTime}}发布</font>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <!-- 首页结束 -->



                    </div>
                    <div class="pagination-container">
                        <el-pagination class="pagiantion" @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                            layout="total, prev, pager, next, jumper" :total="pagination.total">
                        </el-pagination>
                    </div>
                </div>

            </div>




            <div class="filters-wrap">
                <div class="hd">
                    <div class="label">友情链接</div>
                    <div class="selected-items"></div>
                </div>
                <div class="bd">
                    <div class="filter-item" data-key="c">
                        <label>合作伙伴</label>
                        <ul class="choices">
                            <li><a href="http://www.xianren.net/" target="_blank">网站代维</a></li>
                            <li><a href="http://www.diunale.com/" target="_blank">丢哪了搜索</a></li>
                            <li><a href="https://www.diunal.com/dojump.php?url=http://www.zhaohuiwang.com/found.php"
                                    rel="nofollow" target="_blank">找回网</a></li>
                            <li>
                                <a href="https://www.diunal.com/dojump.php?url=http://bj.58.com/xunwu/?from=58.com_bottom_bj_2&amp;PGTID=14091981019490.28613383788615465&amp;ClickID=1"
                                    rel="nofollow" target="_blank">58同城寻物</a>
                            </li>
                            <li><a href="https://www.diunal.com/dojump.php?url=http://www.diunale.com/" rel="nofollow"
                                    target="_blank">失物招领搜索</a></li>
                            <li><a href="https://www.diunal.com/dojump.php?url=http://www.cswzl.com/" rel="nofollow"
                                    target="_blank">中国失物招领网</a></li>
                            <li><a href="https://www.diunal.com/dojump.php?url=http://www.bjsubway.com/support/swzl/"
                                    rel="nofollow" target="_blank">北京地铁失物招领</a></li>
                            <li>
                                <a href="https://www.diunal.com/dojump.php?url=http://www.bcia.com.cn/server/service/lostfound.shtml"
                                    rel="nofollow" target="_blank">北京首都机场失物招领网站</a>
                            </li>
                            <li>
                                <a href="https://www.diunal.com/dojump.php?url=http://www.police.sh.cn/shga/gweb/zsw/zsw_index.jsp"
                                    rel="nofollow" target="_blank">上海公安</a>
                            </li>
                            <li><a href="https://www.diunal.com/dojump.php?url=http://swzl.cqnews.net/" rel="nofollow"
                                    target="_blank">重庆失物招领平台</a></li>

                        </ul>
                    </div>
                    <div class="filter-item" data-key="c">
                        <label>友情链接</label>
                        <ul class="choices">
                            <li><a href="http://www.diunal.com/lost.html" target="_blank" title="寻物启事网">寻物启事网</a></li>

                            <li><a href="http://www.xianren.net/" target="_blank" title="闲人网络">闲人网络</a></li>

                            <li><a href="http://www.diunal.com/sitemap.xml" target="_blank" title="百度地图">百度地图</a></li>

                            <li><a href="http://www.diunal.com/cat-1-area-496.html" target="_blank"
                                    title="失物招领">失物招领</a>
                            </li>

                            <li><a href="http://www.diunal.com/sitemap_google.xml" target="_blank" title="网站地图">网站地图</a>
                            </li>

                            <li><a href="http://www.diunal.com/lost.html" target="_blank" title="寻物启事">寻物启事</a></li>

                            <li><a href="http://www.diunal.com/cat-1-area-2.html" target="_blank"
                                    title="上海寻物启事">上海寻物启事</a>
                            </li>

                            <li><a href="http://tieba.baidu.com/f?ie=utf-8&amp;kw=%E5%A4%B1%E7%89%A9%E6%8B%9B%E9%A2%86"
                                    target="_blank" title="招领贴吧">招领贴吧</a></li>

                            <li><a href="http://www.shiwurenling.com/" target="_blank" title="失物认领网">失物认领网</a></li>

                        </ul>
                        <br>
                    </div>
                </div>
            </div>
            <div id="footer">

                <span id="icp" class="fleft gray-link">
                    © 2010-2023 DiuNaL.com All Rights Reserved. <a href="http://beian.miit.gov.cn/">陕ICP备11012237号-4</a>
                    技术支持:XianRenNet
                </span>
            </div>
        </div>
    </div>



    <script>
        new Vue({
            el: "#app",
            data: {
                preUrl: "./lost-found.html?id=",
                dataList: [],//列表数据
                pagination:
                {//分页相关属性
                    currentPage: 1,
                    pageSize: 10,
                    total: 100,
                    name: null,
                    begin: null,
                    end: null,
                },
                autoUpload: true,//自动上传
                activeName: 'first',//添加/编辑窗口Tab标签名称
                formData: {},//表单数据
                tableData: [],//添加表单窗口中检查组列表数据
                EmpIds: [],//添加表单窗口中检查组复选框对应id
                dialogFormVisible: false,//控制添加窗口显示/隐藏


            },
            mounted() {
                //当页面加载完成后，发送异步请求，获取数据
                this.findPage();

            },
            methods: {
                //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
                handleAvatarSuccess(response) {

                    this.formData.image = response.data;

                },
                //上传图片之前执行
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        this.$message.error('上传套餐图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传套餐图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                //添加
                handleAdd() {
                    axios.post(`/publishDto/add`, this.formData).then(response => {
                        this.formData = response.data;
                        if (response.data.code == 1) {
                            this.dialogFormVisible = false;
                            this.findPage();
                            this.$message.success(response.data.message);
                        } else {
                            this.$message.error("数据有误,请检查");
                        }
                    })
                },
                // 重置表单
                resetForm() {
                },
                // 弹出添加窗口
                handleCreate() {
                    this.dialogFormVisible = true;
                    this.activeName = "first";
                    this.formData = {};


                },
                findPage() {
                    let params = {
                        currentPage: this.pagination.currentPage,
                        pageSize: this.pagination.pageSize,
                        name: this.pagination.name,
                        begin: this.pagination.begin,
                        end: this.pagination.end
                    };
                    axios.post(`/find`, params).then(response => {
                        this.dataList = response.data.data.rows;
                        console.log(response.data.data.rows);
                        this.pagination.total = response.data.data.total;

                    })
                },
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.findPage();
                },


            }
        });

    </script>

</body>

</html>